<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// var btn1 = document.querySelector("#btn1");
			// btn1.onclick = function(){
			// 	console.log("传统方式函数在元素之前时，不会触发,并且会报错");
			// }
			
			window.onload = function(){
				var btn2 = document.querySelector("#btn2");
				btn2.onclick = function(){
					console.log("window.onload时窗口（页面）加载事件，当文档内容完全加载完成后触发（包括图像、脚本文件、测试士、文件等）");
				}
			}
			window.onload = function(){
				var btn2 = document.querySelector("#btn2");
				btn2.addEventListener("click",function(){
					console.log("但是传统使用多个window.onload时会发生冲突，后一个会覆盖前一个");
				})
			}
			
			window.addEventListener("load",function(){
				var btn3 = document.querySelector("#btn3");
				btn3.addEventListener("click",function(){
					console.log("推荐这样使用");
				})
			})
			window.addEventListener("load",function(){
				var btn3 = document.querySelector("#btn3");
				btn3.addEventListener("click",function(){
					console.log("多个addEventListener也不会冲突");
				})
			})
			
			window.addEventListener("DOMContentLoaded",function(){
				var btn3 = document.querySelector("#btn3");
				btn3.addEventListener("click",function(){
					console.log("load必须等页面内容全部加载完，包含页面dom元素、图片、flash、css等。");
					console.log("DOMContentLoaded是DOM加载完毕，不包含图片、falsh、css等就可以执行，加载速度比load更快一些");
				})
			})
		</script>
		<button id="btn1">btn1</button>
		<button id="btn2">btn2</button>
		<button id="btn3">btn3</button>
	</body>
</html>
